{% extends 'base.html.twig' %}

{% block stylesheets %}
<style>
    #body {
        background: transparent url('{{ imgsrc("images/rulebg.jpg") }}') no-repeat top center;
        background-size: cover;
    }
    .title { display:block; margin: 0 auto; width: 107px; padding-top: 40px; }
    .content {
        font-size: 11px; color: #fff;
        height: 300px; margin: 10px auto; overflow-y: scroll;
        padding: 10px; width: 80%; font-weight: bold;
    } 
    .content h2 { margin: 0 ; padding: 0; font-size: 12px; }
    .content section { margin: 10px 0; }
    .content .rule { margin-bottom: 5px;}
    .btn { display: block; margin: 0 auto; width: 120px; }
    .btn img { width: 100%; }
    @media all and (max-height: 420px) {
        .title { padding-top: 20px; }
        .content { 
            margin: 0 auto;
            transform: scale3d(0.9, 0.9, 1);
            -webkit-transform: scale3d(0.9, 0.9, 1); 
        }
    }
</style>
{% endblock %}

{% block body %}
    <img class='title' src='{{ imgsrc("images/ruletitle.png")}}'>
    <div class='content'>
        <h2>游戏时间：2月16日至2月19日零时</h2>
        <section>
            <div>奖项设置：</div>
            <table style='width: 90%;'>
                <tr><td>一等奖</td><td>iPhone6</td><td>2台</td></tr>
                <tr><td>二等奖</td><td>流量红包150M</td><td>300份</td></tr>
                <tr><td>三等奖</td><td>流量红包30M</td><td>10000份</td></tr>
            </table>
        </section>
        <section>
            <div>游戏方式：</div>
            <div class='rule'>1.点击“开始游戏”；</div>
            <div class='rule'>2.玩家在30秒内接住从屏幕上方掉落的金币和彩球，累积1000金币即可参加抽奖，每增加10万金币可增加一次抽奖机会。重复体验所得金币数可以累积。</div>
            <div class='rule'>3.发送给好友或分享到朋友圈，为好友送出新春祝福。</div>
            <div class='rule'>4.接到不同颜色的彩球有不同的奖励：
                <table style='width: 90%;'>
                    <tr>
                        <td>红球</td><td>（名家之约）</td> <td>金币*3倍</td>
                    </tr>
                    <tr>
                        <td>绿球</td><td>（健康管理）</td><td>金币*3倍</td>
                    </tr>
                    <tr>
                        <td>蓝球</td><td>（客服节）</td><td>金币*3倍</td>
                    </tr>
                    <tr>
                        <td>橙球</td><td>（全国通）</td><td> +5秒</td>
                    </tr>
                    <tr>
                        <td>紫色</td><td>（立保通）</td><td>+5秒</td>
                    </tr>
                    <tr>
                        <td colspan='3'>若接到炸弹时间减5秒</td>
                    </tr>
                </table>
            </div>
            <div class='rule'>5.“快乐”、“幸福”、“健康”、“团圆”、“太平”的新年祝福也请大家接住哦。</div>
            <div class='rule'>6.获奖后需填写个人姓名、手机以便兑现奖品。奖品在3月1日统一兑现，便于流量当月使用。</div>
            <div class='rule'>7.点击“查看金库”，可查看累积金币总额并抽奖。</div>
            <div style="opacity:0.8;">温馨提醒：为保证游戏顺畅，建议iPhone手机在iOS 8.0版本下使用。</div>
        </section>
    </div>
    <a class='btn' href='{{ urlFor("game")}}'><img src='{{ imgsrc("images/btnstart.png")}}'></a>
{% endblock %}
    
{% block javascripts %}
{#{{ js('js/velocity.ui.min.js') }}#}
<script>
    $(function(){
        $('#body').css('height', h + 'px');
    });
</script>
{% endblock %}